<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="flex justify-between">
        <header-title :title-list="['Android', 'IOS']" @updateData="updataClick"/>
        <el-button type="primary" @click="addAppVersionClick">新增版本</el-button>
      </div>
      <div v-for="item in listData" :key="item.id" class="flex justify-around">
        <div class="w-1/4 flex items-center">{{ item.name }}</div>
        <div class="flex flex-col w-1/4">
          <div class="w-full flex">
            <div class="frequency">心跳频率</div>
            <span>  {{ item.heartbeat_frequency }}s/次</span>
          </div>
          <div class="w-full flex">
            <div class="frequency">麦位刷新频率</div>
            <span>{{ item.refresh_frequency }}s/次</span>
          </div>
        </div>
        <div class="w-1/4 justify-center items-center flex date">
          <div class="frequency">修改日期:</div>
          <span>{{ item.update_time }}</span>
        </div>
        <div class="w-1/4 flex justify-center items-center">
          <el-button plain size="mini" type="primary" @click="configEditClick(item)">编辑</el-button>
        </div>
      </div>

      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column label="版本号" prop="version" width="180"></el-table-column>
        <el-table-column label="应用名称" prop="android_application_type" width="180">
          <template slot-scope="scope">
            {{ scope.row.android_application_type === 1 ? '回声' : '回声' }}
          </template>
        </el-table-column>
        <el-table-column label="控制开关" prop="version_status">
          <template slot-scope="scope">
            {{ scope.row.version_status === 1 ? '开' : '关' }}
          </template>
        </el-table-column>
        <el-table-column label="配置值" prop="setting_content">
          <template slot-scope="scope">
            <div v-for="(item, index) in JSON.parse(scope.row.setting_content)" :key="index" class="flex flex-col">
              <span v-for="(value, key) in item" :key="key">
                <span>"{{ key }}" :</span>
                <span>"{{ value }}"</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" prop="update_time"></el-table-column>
        <el-table-column label="操作" prop="action">
          <template slot-scope="scope">
            <el-button plain size="mini" type="primary" @click="editTableClick(scope.row)">编辑</el-button>
            <el-button plain size="mini" type="danger" @click="delAppVersion(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="flex justify-end">
        <el-pagination
          :current-page="pageList.page"
          :page-size="pageList.perPage"
          :page-sizes="[10, 20, 30, 40]"
          :total="pageList.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

      <edit-config-version :detail="configModal.detail"
                           :dialog-visible.sync="configModal.visibility" @upadeteConfig="getConfigData()"
      />
      <table-version :detail.sync="tableVersion.detail" :dialog-visible.sync="tableVersion.visibility"
                     :status.sync="tableVersion.status" @updateTable="getTableData"
      />
    </el-card>
  </div>
</template>

<script>
import headerTitle from '../listVersionComps/headerTitle/headerTitle'
import { appSetingListData, appTableData, delAppVersion } from '@/api/config/listVersion'
import editConfigVersion from './childComps/editConfigVersion'
import tableVersion from './childComps/tableVersion'

export default {
  name: 'appVersionConfig',
  components: {
    headerTitle, editConfigVersion, tableVersion
  },
  data() {
    return {
      // 配置相关的数据
      configModal: {
        visibility: false,
        detail: {}
      },
      // 版本相关
      tableVersion: {
        visibility: false,
        detail: {},
        // 状态 false 新增, true 编辑
        status: false
      },
      loading: false,
      app_type: 1,
      listData: [],
      tableData: [],
      pageList: {
        total: null,
        page: null,
        perPage: null
      }
    }
  },
  created() {
    this.getConfigData()
    this.getTableData()
  },
  methods: {
    // 获取 配置
    async getConfigData(app_type = 1) {
      this.app_type = app_type
      const detail = await appSetingListData(this.app_type)
      if (detail.code === 200) {
        this.listData = detail.data.list
      }
    },
    // 获取表格数据
    async getTableData(app_type = this.app_type, page = 1, perPage = 10) {
      this.loading = true
      const detail = await appTableData(app_type, page, perPage)
      if (detail.code === 200) {
        this.tableData = detail.data.list
        Object.assign(this.pageList, detail.data.meta)
        this.loading = false
      }
    },
    /**
     * addAppVersionClick
     * @desc 新增app版本的点击事件
     */
    addAppVersionClick() {
      this.tableVersion.status = false
      this.tableVersion.visibility = true
    },
    /**
     * updataClick
     * @desc 点击头部 更新数据
     */
    updataClick(app_type) {
      this.getConfigData(app_type)
      this.getTableData()
    },
    /**
     * configEditClick
     * @desc 配置相关编辑按钮点击事件
     */
    configEditClick(item) {
      this.configModal.detail = item
      this.configModal.visibility = true
    },
    /**
     * editTableClick
     * @desc 点击编辑按钮
     * @param item 当前行的数据
     */
    editTableClick(item) {
      this.tableVersion.detail = item
      this.tableVersion.status = true
      this.tableVersion.visibility = true
    },
    /**
     *  delAppVersion
     *  @desc 点击删除按钮
     */
    async delAppVersion(id) {
      this.$confirm('确认删除？')
        .then(async _ => {
          const detail = await delAppVersion(id)
          if (detail.data) {
            this.$message.success('删除成功!!')
            this.getTableData()
          }
        })
        .catch(_ => {
        })
    },
    // 分页事件
    handleSizeChange(val) {
      this.pageList.perPage = val
      this.getTableData(this.app_type, this.pageList.page, this.pageList.perPage)
    },
    handleCurrentChange(val) {
      this.pageList.page = val
      this.getTableData(this.app_type, this.pageList.page, this.pageList.perPage)
    }
  }
}
</script>

<style lang="scss" scoped>

.frequency {
  padding-right : 20px;
  width         : 50%;
  height        : 40px;
  box-sizing    : border-box;
  text-align    : right;
}

.date {
  div {
    width       : 34%;
    display     : flex;
    align-items : center;
  }

  span {
    width : 65%;
  }
}

</style>
